<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>荷芯联盟答题PK</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

		<link rel="stylesheet" href="css/answerPk.css" />
		<link rel="stylesheet" type="text/css" href="css/hehua.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script src="js/moduls/alliance.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/moduls/pk.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

			<div class="top-btnBack" onclick="history.go(-1);">
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-logo2">
			</div>
		</div>

		<div class="right_items">
			<div class="item record" style="text-indent: 0.18rem;">我的PK记录</div>
		</div>

		<div class="content">

			<div class="middlePath">
				<div class="title">
					<img src="img/answerPK/answerPk.png" alt="">
					<div id="alliName" style="width:100%;font-size: 0.36rem;height: 0.36rem;line-height: 0.36rem; color: #f7dc6a;margin: 0.1rem 0; font-weight: bold;font-family: '微软雅黑';">
						<!--<span>**</span>
						<span>联盟</span>-->{{teamInfos.name}}
					</div>
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
				<div class="midContent">
					<div class="teamInfo">
						<div class="honorVal">{{teamInfos.honor}}荣誉值</div>
						<div class="rank">排名：{{teamInfos.rownum}}</div>
						<div class="area">地区：{{teamInfos.address}}</div>
					</div>
					<div class="line">
						<img src="img/line.png" alt="">
					</div>
					<div class="brief">
						<!--<span>我的</span>-->
						<div class="captainImg"><img :src="myInfo.avatar" style="border-radius: 50%;"></div>
						<div class="captain">
							<span>{{myInfo.name}} </span>
							<span>{{myInfo.lotusNum}}荷花</span>
						</div>
						<div class="teamNum">
							<span>队伍</span>
							<span>{{teamInfos.rownum}}</span>名
						</div>
					</div>
					<div class="line">
						<img src="img/line.png" alt="">
					</div>

				</div>

				<div class="challenge">
					<div class="sendBtn">我发起的</div>
					<div class="acceptBtn">挑战我的</div>
				</div>
				<div class="persons">
					<div class="chanPerson" v-for="(person,index) in pkUsers" :key="index">
						<div class="item" @click="checkUser(index)">
							<img :src="person.avatar" />
							<div class="chanBtn">
								{{checked[index]==1?"已选择":"选TA挑战"}}
							</div>
							<!--<div class="chanBtn" v-show="checked[index]?true:false">
							选TA挑战
						</div>-->
						</div>

					</div>

				</div>

				
			</div>
			<div class="bottomBtn">
					<div class="choose startChallenge">发起挑战</div>
					<div class="choose friendChallenge">选择朋友挑战</div>
					<div class="refresh">
						<a style="color: #1B47EC;">刷新一下</a>

					</div>
				</div>

		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '.content',
				data: {
					myInfo: [],
					teamUsers: [],
					teamInfos: [],
					pkUsers: [],
					checked: [],
					checkedUser: []
				},
				methods: {
					checkUser(_index) {
						if(this.checked[_index]) {
							Vue.set(this.checked, _index, 0)
						} else {
							Vue.set(this.checked, _index, 1)
						}

						console.log(this.checked)
					}
				}
			})

			//获取自己联盟信息
			getMyTeam(t_skey, function(_res) {
				app.teamUsers = _res.teamUsers;
				app.teamInfos = _res.teamInfo;
				for(var i = 0; i < _res.teamUsers.length; i++) {
					if(_res.teamUsers[i]["uid"] == t_uid) {
						app.myInfo = _res.teamUsers[i];
					}

				}

				$(".content").css("opacity", 1);

			})
			//获取pk对手
			getPkUser(t_skey, function(_res) {
				app.pkUsers = _res.data;
				for(var i = 0; i < _res.data.length; i++) {
					app.checked[i] = 0
				}
				$(".content").css("opacity", 1);

			})

			//选择朋友挑战
			$(".friendChallenge").click(function() {
				//				console.log("选择朋友挑战")
				var t_manner = "好友pk";
				window.localStorage.setItem("manner", t_manner);
				window.location.href = "answerQue.html";
//				alert("选择朋友挑战");
			})

			//发起挑战
			$(".startChallenge").click(function() {
				app.checkedUser = [];
				for(var i = 0; i < app.checked.length; i++) {
					if(app.checked[i] == 1) {
						app.checkedUser.push(app.pkUsers[i]["uid"]);
					}
				}

				if(app.checkedUser.length > 10) {
					alert("您最多只能选择10个人进行本次挑战！");
					return
				}
				if(app.checkedUser.length <= 0) {
					alert("请选择挑战对手！");
					return
				}
				var t_manner = "联盟pk";
				verifyCanPk(t_skey,t_manner,app.checkedUser,function(res) {
					var t_rivaIds = app.checkedUser;
					var _rivaIds = t_rivaIds.join("-");
//					console.log(_rivaIds)
					window.localStorage.setItem("rivaIds", _rivaIds);
					window.localStorage.setItem("manner", t_manner);
					window.location.href = "answerQue.html";
				})

			})

			//刷新一下
			$(".refresh").click(function() {
//				console.log(app.pkUsers);
				app.pkUsers = [];
				for(var i = 0; i < app.checked.length; i++) {
					app.checked[i] = 0;
				}
				//				console.log(app.pkUsers)

				getPkUser(t_skey, function(_res) {
					app.pkUsers = _res.data;
				})
			})
		</script>
		<script src="js/answerPk.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>